<template>
	<view class="u-padding-top-30">
		<view class="mdx-center-min u-flex lines">
			<view class="leftTitle">
				真实姓名
			</view>
			<view class="right_box">
				<u-input :height="height" v-model="name" type="text" :border="false" placeholder="请输入" />
			</view>
		</view>
		<view class="mdx-center-min u-flex lines">
			<view class="leftTitle">
				性别
			</view>
			<view class="right_box">
				<u-input :height="height" v-model="sex" type="select" :select-open='sexShow' @click="sexShow = true"
					:border="false" placeholder="请输入" />
			</view>
		</view>
		<view class="mdx-center-min u-flex lines">
			<view class="leftTitle">
				手机号
			</view>
			<view class="right_box u-flex-1">
				<u-input :height="height" v-model="mobile" type="text" :border="false" placeholder="请输入" />
			</view>
		</view>
		<view class="mdx-center-min u-flex lines">
			<view class="leftTitle">
				验证码
			</view>
			<view class="right_box u-flex">
				<view class="u-flex-1">
					<u-input :height="height" v-model="code" type="text" :border="false" placeholder="请输入" />
				</view>
				<view class="code_text">
					获取验证码
				</view>
			</view>
		</view>
		<view class="mdx-center-min u-flex lines">
			<view class="leftTitle">
				年龄
			</view>
			<view class="right_box">
				<u-input :height="height" v-model="name" type="number" :border="false" placeholder="请输入" />
			</view>
		</view>
		<view class="mdx-center-min u-flex lines">
			<view class="leftTitle">
				所选区域
			</view>
			<view class="right_box u-flex">
				<view class="border_r u-p-r-15">
					<u-input :height="height" input-align="right" v-model="province" type="select"
						:select-open='sexShow' @click="sexShow = true" :border="false" placeholder="省" />
				</view>
				<view>
					<u-input :height="height" input-align="right" v-model="city" type="select" :select-open='sexShow'
						@click="sexShow = true" :border="false" placeholder="市" />
				</view>
			</view>
		</view>
		<view class="mdx-center-min  lines" v-for="(row,index) in platform" :key='index'>
			<view class="u-flex">
				<view class="leftTitle">
					所选区域
				</view>
				<view class="right_box u-flex-1">
					<u-input :height="height" v-model="row.name" type="select" :select-open='platformShow'
						@click="platformShow = true" :border="false" placeholder="市" />
					<view class="tagtext">
						平台
					</view>
				</view>
			</view>
			<view class="u-flex u-margin-top-40">
				<view class="leftTitle">
					ID
				</view>
				<view class="right_box">
					<u-input :height="height" v-model="row.id" type="text" :border="false" placeholder="请输入" />
				</view>
			</view>
		</view>
		<view class="addpt mdx-center-min" @click="addpt">
			添加平台
		</view>
		<view class="xianlengs">

		</view>
		<view class="u-flex u-row-between mdx-center-min u-p-t-80">
			<view class="idcard">
				<view class="img_box" @click="selectImg(0)">
					<image :src="idcardPositive" mode="" v-if="idcardPositive"></image>
					<image src="/static/images/Idcard1.png" v-else mode=""></image>
				</view>
				<view class="u-text-center cardText">身份证头像页</view>
			</view>
			<view class="idcard">
				<view @click="selectImg(1)">
					<image :src="idcardBack" mode="" v-if="idcardBack"></image>
					<image src="/static/images/Idcard2.png" v-else mode=""></image>
				</view>
				<view class="u-text-center cardText">身份证国徽页</view>
			</view>
		</view>
		<view class="mdx-center-min">
			<u-button :custom-style="customStyle" :hairLine="false">保存</u-button>
		</view>
		<u-toast ref="uToast" />
		<u-gap height="100"></u-gap>

		<u-action-sheet :list="actionSheetList" v-model="sexShow" @click="actionSheetCallback"></u-action-sheet>
		<u-action-sheet :list="platformList" v-model="platformShow" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '', //姓名
				mobile: '', //手机号
				code: '', //验证码
				sex: '男', //行呗
				age: '', //年龄
				province: '', //省
				city: '', //市
				idcardPositive: "",
				idcardBack: '',


				platform: [{
					name: '',
					id: ''
				}],

				height: 40,
				sexShow: false,
				platformShow: false,
				platformList: [{
						title: '猫眼'
					},
					{
						title: '票淘淘'
					},
					{
						title: '每天'
					}
				],
				actionSheetList: [{
						title: '男'
					},
					{
						title: '女'
					}
				],
				customStyle: {
					marginTop: '60px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#333333',
					background: '#FFEC3E',
					border: '#fff',
					"font-weight": 550,

				},
			}
		},
		methods: {
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.sex = this.actionSheetList[index].title;
			},
			addpt() {
				this.platform.push({
					name: '',
					id: ''
				})
			},
			selectImg(typee) {
				uni.chooseImage({
					count: 1,
					success: (imgPath) => {
						uni.showLoading({
							title: '身份证识别中...',
							mask: true
						})
						this.idcardDiscern(imgPath.tempFilePaths[0], typee)
					}
				})
			},
			idcardDiscern(imgUrl, typee) {
				let reqUrl = ''
				if (typee == 0) {
					reqUrl = '/api/OcrPublic/ocr_idcard'
				} else {
					reqUrl = '/api/UploadFiles/upload'
				}
				uni.uploadFile({
					url: this.$store.state.baseUrl + reqUrl, //仅为示例，非真实的接口地址
					filePath: imgUrl,
					header: {
						'XX-Token': this.token,
						'XX-Device-Type': 'wxapp'
					},
					name: 'file',
					success: (res) => {
						let data = JSON.parse(res.data)
						if (data.code == 0) {
							if (typee == 0) {
								this.$refs.uToast.show({
									title: '身份证识别成功',
									type: 'success',
								})
								this.idcardPositive = data.data.img_path;
							} else {
								this.idcardBack = data.data.url;
							}
						} else {
							let data = JSON.parse(res.data)
							this.$refs.uToast.show({
								title: data.msg,
								type: 'error',
							})
						}
					},
					file: e => {
						this.$refs.uToast.show({
							title: '图片上传失败',
							type: 'error',
						})
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.lines {
		padding: 25rpx 20rpx;
		border-radius: 10rpx;

		background-color: #FAFAFA;
		margin-bottom: 40rpx;

		.leftTitle {
			font-size: 30rpx;
			width: 150rpx;
			border-right: 1rpx solid #DDDDDD;
			color: #999999;
		}

		.right_box {
			padding: 0 20rpx;
			flex: 1;
			position: relative;

			.code_text {
				color: #4A9CE8;
			}
		}

		.tagtext {
			position: absolute;
			right: 55rpx;
			top: 0;
			line-height: 48rpx;
			color: #666;
		}

		.border_r {
			border-right: 1rpx solid #dddddd;
		}
	}

	.addpt {
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #fafafa;
		border: 1rpx dashed #dddddd;
	}

	.xianlengs {
		margin-top: 50rpx;
		height: 20rpx;
		background-color: #FAFAFA;
	}

	.idcard {
		image {
			width: 335rpx;
			height: 205rpx;
			border-radius: 5rpx;
		}

		.cardText {
			margin-top: 20rpx;
			color: #666666;
		}
	}
</style>
